<template>
	<page-meta :page-style="'overflow:'+(showOrderPop?'hidden':'visible')"></page-meta>
	<view class="task_giftorderinfo_page">
		<view class="f-15 c-999999">订单信息</view>
		<view class="giftorderinfo_box">
			<view class="giftorderinfo_img_box">
				<image v-if="info.cover_img" class="giftorderinfo_img" :src="picUrl+info.cover_img" mode="aspectFill">
				</image>
			</view>
			<view class="giftorderinfo_text_box">
				<view class="f-13 ellipsis-3">{{info.goods_name}}</view>
				<view class="f-12 c-999999 mt-10">兑换时间：{{info.pay_time}}</view>
				<view class="f-13 c-00A0DC giftorderinfo_price">消耗油滴{{info.order_amount_total}}L</view>
			</view>
		</view>
		<view v-if="info.goods_type==1&&info.address_info.name" class="giftorderinfo_addr_box f-13">
			<view class="display_flex">
				<view class="">收货人</view>
				<view class="flex-1 text-r c-999999">{{info.address_info.name}}</view>
			</view>
			<view class="display_flex mt-20">
				<view class="">手机号</view>
				<view class="flex-1 text-r c-999999">{{info.address_info.pay_time}}</view>
			</view>
			<view class="display_flex mt-20" style="align-items: flex-start;">
				<view class="">收货地址</view>
				<view class="flex-1 text-r c-999999 ml-25">
					{{info.address_info.area.province_name}}{{info.address_info.area.city_name}}{{info.address_info.area.area_name}}{{info.address_info.address}}
				</view>
			</view>
		</view>
		<view class="giftorderinfo_addr_box f-13">
			<view class="display_flex">
				<view class="">订单编号</view>
				<view class="flex-1 text-r c-999999 ml-25" @click="copyNum(info.order_no)">{{info.order_no}}</view>
				<view class="copy_tag" @click="copyNum(info.order_no)">复制</view>
			</view>
			<view class="display_flex mt-20">
				<view class="">配送方式</view>
				<view class="flex-1 text-r c-999999">{{info.delivery_type}}</view>
			</view>
			<view class="display_flex mt-20">
				<view class="">物流状态</view>
				<block v-if="info.goods_type==2">
					<view class="flex-1 text-r c-43CA52">已发放</view>
				</block>
				<block v-else>
					<view class="flex-1 text-r c-F03636" v-if="info.order_status==2">待发货</view>
					<view class="flex-1 text-r c-43CA52" v-if="info.order_status==3">已发货</view>
					<view class="flex-1 text-r c-43CA52" v-if="info.order_status==4">交易完成</view>
				</block>

			</view>
			<view class="display_flex mt-20" v-if="info.order_status==3||info.order_status==4">
				<view class="">物流单号</view>
				<view class="flex-1 text-r c-999999 ml-25" @click="copyNum(info.express_no)">{{info.express_no}}</view>
				<view class="copy_tag" @click="copyNum(info.express_no)">复制</view>
			</view>
		</view>
		<view class="giftorderinfo_bottom">
			<view v-if="info.goods_type==2" class="group_public_btn_block" @click="goGiftOrder">去使用</view>
			<view class="c-00A0DC mt-10 f-13 text-c" @click="goTaskIndex">获取更多油滴 ></view>
		</view>
		<view v-if="showOrderPop" class="mask_box" style="background: rgba(0, 0, 0, .8);"></view>
		<view v-if="showOrderPop" class="task_order_pop">
			<image class="task_pop_img" :src="onlinePic+'task/task_pop_img.png'" mode="widthFix"></image>
			<view class="task_pop_btn" @click="goTaskIndex">获取更多油滴 ></view>
			<view class="text-c mt-20">
				<uni-icons class="pop_close_icon" @click="closePopup" type="close" color="#ffffff"
					size="40"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTaskOrderInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				showOrderPop: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {},
		onLoad(options) {
			this.order_id = options.order_id
			this.showOrderPop = options.isShow == 1 ? true : false
			this.getTaskOrderInfo()
		},
		methods: {
			getTaskOrderInfo() {
				getTaskOrderInfo({
					order_id: this.order_id
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			copyNum(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							mask: true,
							icon: 'success',
							duration: 1500

						})
					}
				});
			},
			goTaskIndex() {
				uni.navigateTo({
					url: '/pages/taskcentre/index'
				})
				var params = {
					event_code: '礼品订单信息',
					path: 'pages/taskcentre/giftorderinfo',
					event_id: '',
					title: '',
					source_page: '礼品订单信息-获取更多油滴',
					value: '',
				}
				app.BurialPoint(params)
			},
			goGiftOrder() {
				uni.redirectTo({
					url: '/pages/my/editmyinfo'
				})
			},
			closePopup() {
				this.showOrderPop = false
			},
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {

			}
		},
	}
</script>

<style lang="scss">
	.task_giftorderinfo_page {
		padding: 50rpx;

		.giftorderinfo_box {
			display: flex;
			align-items: flex-start;
			margin-top: 38rpx;

			.giftorderinfo_img_box {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #F1F1F1;

				.giftorderinfo_img {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.giftorderinfo_text_box {
				flex: 1;
				height: 200rpx;
				position: relative;
				padding-top: 3rpx;
				margin-left: 20rpx;

				.giftorderinfo_price {
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}

		.giftorderinfo_addr_box {
			padding-top: 50rpx;
			margin-top: 50rpx;
			border-top: 1rpx solid #F1F1F1;
		}

		.c-43CA52 {
			color: #43CA52;
		}

		.c-F03636 {
			color: #F03636;
		}

		.copy_tag {
			width: 60rpx;
			height: 30rpx;
			color: #ffffff;
			font-size: 22rpx;
			border-radius: 4rpx;
			background: #C5C5C5;
			opacity: 0.6;
			text-align: center;
			margin-left: 16rpx;
		}

		.task_order_pop {
			position: fixed;
			top: 100rpx;
			left: 50rpx;
			right: 50rpx;
			z-index: 1001;

			.task_pop_img {
				width: 100%;
			}

			.task_pop_btn {
				width: 240rpx;
				color: #999999;
				font-size: 26rpx;
				padding: 16rpx 0;
				text-align: center;
				border-radius: 30rpx;
				border: 2rpx solid #999999;
				position: absolute;
				bottom: 25%;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}

		.giftorderinfo_bottom {
			position: fixed;
			left: 50rpx;
			right: 50rpx;
			bottom: 4%;
			z-index: 1;
		}
	}
</style>